// Copyright 2017 The Kubernetes Authors.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
@import '../variables';
%kd-toolbar-logo-placeholder {
    height: 130px;
    margin-right: $baseline-grid;
    min-height: 4 * $baseline-grid;
    min-width: 70px;
    width: 130px;
}

.kd-toolbar-logo-link {
    .kd-toolbar-logo {
        @extend %kd-toolbar-logo-placeholder;
    }
    .kd-toolbar-logo-text {
        @extend %kd-toolbar-logo-placeholder;
        min-width: 14 * $baseline-grid;
        width: 14 * $baseline-grid;
    }
}

.kd-middle-ellipsised-link {
    display: block;
}

.kd-logo-bar {
    flex: 1;
}

.kd-search-bar {
    flex: 2;
}

.kd-global-actions {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

kd-chrome {
    .kd-toolbar {
        background-color: $content-background;
        color: $primary;
        height: 6 * $baseline-grid;
        min-height: 6 * $baseline-grid;
        padding-left: 1.75 * $baseline-grid;
        .kd-global-action-icon {
            color: $primary;
            margin-right: $baseline-grid / 4;
            margin-top: .6 * $baseline-grid;
        }
    }
    .kd-system-banner {
        background-color: $running-resource-color;
        box-shadow: $whiteframe-shadow-1dp;
        color: $foreground-1;
        display: inline;
        font-size: $body-font-size-base;
        height: 6 * $baseline-grid;
        line-height: 6 * $baseline-grid;
        min-height: 6 * $baseline-grid;
        overflow: hidden;
        padding: 0 (3 * $baseline-grid);
        white-space: nowrap;
    }
    .kd-system-banner-error {
        background-color: $error-color;
    }
    .kd-system-banner-warning {
        background-color: $warning;
    }
}

.kd-second-toolbar {
    box-shadow: $whiteframe-shadow-1dp;
    height: 7 * $baseline-grid;
    min-height: 7 * $baseline-grid;
}

.kd-content-div-filled {
    height: 100%;
}

.kd-main-content-div {
    height: 100%;
    position: absolute;
    width: 100%;
}

.kd-main-content-box {
    background-color: transparent;
    overflow-y: auto;
}

.kd-spinner {
    align-content: center;
    align-items: center;
    display: flex;
    flex: 1;
    height: 100%;
    justify-content: center;
    padding-top: 2.5 * $baseline-grid;
    >md-progress-circular {
        margin: 0 auto;
    }
}

body,
.kd-app-entire-content {
    background-color: $body;
    max-height: 100%;
    // Move entire app content below toolbar to avoid elements overlap with
    // shadow (there was propblem with it on IE).
    z-index: 0;
}

.kd-app-content {
    background-color: $body;
    height: 100%;
    max-height: 100%;
    // Set overflow property to disable margin-collapse, which in turn
    // prevents scrollbar from being always visible.
    overflow-x: hidden;
    position: relative;
    >.md-body-1 {
        &:not(.kd-content-div-filled) {
            padding-bottom: 4 * $baseline-grid;
        }
    }
}

a {
    color: $primary;
    text-decoration: inherit;
}

.kd-success {
    color: $success-color;
}

.kd-error {
    color: $error-color;
}

.kd-warning {
    color: $warning;
}

.kd-toolbar-tools {
    height: 7 * $baseline-grid;
    margin: auto;
    padding-left: $baseline-grid;
}

.kd-text-icon {
    font-size: inherit;
    height: inherit;
    vertical-align: middle;
}

.kd-comma-separated-item {
    display: inline-block;
    &:not(:last-child) {
        &::after {
            content: ',';
        }
    }
}

.kd-pre-block {
    margin: 0;
    min-width: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

$chip-margin: 0 $baseline-grid ($baseline-grid / 2) 0;
// Style taken(mostly) from angular material md-chip style.
.kd-chips {
    background-color: $body;
    border-radius: $baseline-grid;
    display: inline-block;
    margin: $chip-margin;
    max-width: 100%;
    vertical-align: bottom;
}

.kd-chip {
    display: inline;
    float: left;
    max-width: 99%;
    overflow: hidden;
    padding: ($baseline-grid / 4) $baseline-grid;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kd-chips-switch {
    color: $primary;
    cursor: pointer;
    margin-left: -$baseline-grid / 2;
    outline: none;
    padding: ($baseline-grid / 4) $baseline-grid;
}

// Style scrollbars on Webkit-based browsers (e.g., Chrome or Safari).
* {
    &::-webkit-scrollbar {
        background: transparent;
        height: $baseline-grid;
        width: $baseline-grid;
    }
    &::-webkit-scrollbar-thumb {
        background-color: $delicate;
    }
}